import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Select } from 'app/classes/Device';
import { EChartOption } from 'echarts-ng2/src';
import { Subscription } from 'rxjs/Rx';
import 'echarts/theme/macarons';
import { WbsocketService } from 'app/share/wbsocket.service';
import { RealChartOption } from 'app/classes/RealChartOption';
import { environment } from '../../../environments/environment';
import { ECharts } from 'echarts-ng2';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.css']
})
export class DefaultComponent implements OnInit, OnDestroy {
  @ViewChild('echarts') echarts: ECharts;
  public  option: EChartOption;
  public subscription: Subscription;

  public type = 'quantity';
  public navs: Array<Select> = [
    new Select('今日电量', 'quantity'),
    new Select('今日负荷', 'load'),
    new Select('今日无功', 'idle'),
    new Select('功率因素', 'powerFactor')
  ];
  public Observed = this.WbService.connect(environment.wsUrl);
  public status: number;
  constructor(public WbService: WbsocketService) { }
  ngOnInit() {
    this.status = 0;
/*     const chartOption = new RealChartOption('quantity');
    this.option = chartOption.getOption();
    const _data: Array< Array<number> > = new Array; */
    let activeData = new Array;
    let reactiveData = new Array;
    this.subscription = this.Observed.subscribe(
      data => {
        if ( data === 'success' ) {
          this.WbService.send('quantity');
        } else {
            console.log(data);
            if (data.length) {
              const _data = JSON.parse(data);
              activeData = activeData.concat(_data['active']);
              reactiveData = reactiveData.concat(_data['reactive']);
              const chartOption = new RealChartOption('quantity');
              this.echarts.setOption(chartOption.getTwoChartOption()(activeData, reactiveData));
            }

          }
      },
      error => {
        console.log(error)
      },
      () => {
        console.log('连接断开了')
      }
    )
  }
  changeChart(type) {
    if ( type !== this.type) {
      // 去鼠标抖动。判断这次点击和上次点击的值是否一样。
      this.echarts.clear();
      this.type = type;
      let _data = [];
      let activeData = new Array;
      let reactiveData = new Array;
      this.subscription.unsubscribe();
      this.WbService.send(type);
      this.subscription = this.Observed.subscribe(
        data => {
          if (type === 'quantity' ) {
            if (data.length) {
              _data = JSON.parse(data);
              activeData = activeData.concat(_data['active']);
              reactiveData = reactiveData.concat(_data['reactive']);
              const chartOption = new RealChartOption('quantity');
              this.echarts.setOption(chartOption.getTwoChartOption()(activeData, reactiveData));
            }
          }else {
            _data = _data.concat(JSON.parse(data));
            console.log(_data);
            const chartOption = new RealChartOption(type);
            this.echarts.setOption(chartOption.getOption()(_data));
          }


        },
        error => {
          console.log(error)
        },
        () => {
          console.log('连接断开了')
        }
      )
    } else {
      return false;
    }
  }
  ngOnDestroy(): void {
    this.WbService.close();
    this.subscription.unsubscribe();
  }
  send(mes) {
    this.WbService.send(mes);
  }

}
